the-odin-journal

CSS

Selectors

• Types of selectors

    *{}			/* Universal selector */
    div{}		/* Type selector */
    .class{}	/* Class selector */
    #id{}		/* ID selector */
  

• Chaining selectors

  Chain selectors without separation to target elements with multiple classes.

  Example:

    <div>
      <div class="subsection header">Latest Posts</div>
      <p class="subsection preview">This is where a preview for a post might go.</p>
    </div>
  

    .subsection.header {	/* No space */
      color: red;
    }
  

  This targets elements only with both subsection and header classes.

  You can also chain a class and an ID:

    .subsection#preview {
      color: blue;
    }
  

  • Limitations Cannot chain more than one type selector (e.g., divp is invalid).

• Descendant Combinator

  Uses a space between selectors to indicate a relationship.

  Example:

    <div class="ancestor">
        <!-- A -->
        <div class="contents">
            <!-- B -->
            <div class="contents"><!-- C --></div>
        </div>
    </div>
  	
    <div class="contents"><!-- D --></div>
  

    .ancestor .contents {
      /* some declarations */
    }
  

  This selects .contents elements (B and C) inside .ancestor, not D.

  .ancestor > .child , child combinator, does the same thing

  You can use multiple combinators:

    .one .two .three .four {
      /* some declarations */
    }
  

  This targets .four inside .three, inside .two, inside .one. Avoid excessive nesting for clarity and specificity issues.

  For more info, refer this.

• Inheritance

  Typography-based properties (color, font-size, font-family, etc.) are usually inherited, while most other properties aren’t.

• Child and Sibling Combinators

  For details, refer this.

  • > - the child combinator
  • + - the adjacent sibling combinator
  • ~ - the general sibling combinator

    <main class="parent">
      <div class="child group1">
        <div class="grand-child group1"></div>
      </div>
      <div class="child group2">
        <div class="grand-child group2"></div>
      </div>
      <div class="child group3">
        <div class="grand-child group3"></div>
      </div>
    </main>
  

    /* The divs with the class "child" will get selected by this */
    main > div {
      /* Our cool CSS */
    }
  
    /* The divs with the class "grand-child" will get selected by this */
    main > div > div {
      /* More cool CSS */
    }
  

    /* Only the div with the classes "child group2" will get selected by this */
    .group1 + div {
      /* Our cool CSS */
    }
  
    /* Only the div with the classes "child group3" will get selected by this */
    .group1 + div + div {
      /* More cool CSS */
    }
  

    /* All of .group1's div siblings - in this case the 2nd and 3rd .child divs, will get selected by this */
    .group1 ~ div {
      /* Our cool CSS */
    }
  

Specificity, the Cascade

Sort of like a tie-breaker, when an element has multiple, conflicting declarations targeting it.

• Inline style > ID selector > Class Selector > Type selector > Universal selector
• If specificity is the same, then whichever rule was the last defined is the winner

The Box Model

graph LR;
    A[Margin] --> B[Border];
    B --> C[Padding];
    C --> D[Content];

• Standard Box Model

  Here, if we set width and height, they are applied to only content box.

• Alternate Box Model

  Here, if we set width and height, they are applied to the visible box on the page, i.e. content + padding + border.

    html {
      box-sizing: border-box;
    }
    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }
  

  We use this box model more frequently, because it’s easier to work with.

  For more info, refer this.

Margins

For more details, refer this.

• Auto

  • Tells the browser to define the margin for you.
  • In most cases, a value of auto will be equivalent to a value of 0 or else whatever space is available on that side of the element.
  • Handy for horizontal centering.

• Collapsing Margins

  • Vertical margins (only top and bottom) on different elements that touch each other (thus have no content, padding, or borders separating them) will collapse, forming a single margin that is equal to the greater of the adjoining margins.
  • They prevent empty elements from adding extra, usually undesirable, vertical margin space, and they allow for a more consistent approach to declaring universal margins across page elements.

    <h2>Collapsing Margins</h2>
    <div><p>Example Text</p></div>
  

    h2 {
      margin: 0 0 20px 0;
    }
    div {
      margin-top: 40px;  
    }
    p {
      margin-top: 30px;
    }
  

  Common sense would suggest that the total vertical margin space here would be 90px (20px + 40px + 30px), but instead the margins all collapse into a single 40px margin (the highest of the three).

• Negative Margins

  While a positive margin value pushes other elements away, a negative margin will either pull the element itself in that direction, or pull other elements toward it.

Block and Inline

block and inline are outer display types.

Normal Flow is the way that Block and Inline elements are displayed on a page by default before any changes are made to their layout.

• Block

  • The box will break onto a new line.
  • The width and height properties are respected.
  • Padding, margin and border will cause other elements to be pushed away from the box.
  • If width is not specified, the box will extend in the inline direction to fill the space available in its container. In most cases, the box will become as wide as its container, filling up 100% of the space available.
  • Some HTML elements, such as <h1> and <p>, use block as their outer display type by default.

• Inline

  • The box will not break onto a new line.
  • The width and height properties will not apply.
  • Top and bottom padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
  • Left and right padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
  • Some HTML elements, such as <a>, <span>, <em> and <strong> use inline as their outer display type by default.

• Inline-block

  • Midway between block and inline.
  • The box will not break into a new line.
  • The width and height properties are respected.
  • Both top-bottom, left-right padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
  • Useful tool to know about, but in practice, you’ll probably end up reaching for flexbox more often if you’re trying to line up a bunch of boxes.

Flexbox

Flex Visual Cheatsheet

Flexbox is an inner display type (flex and inline-flex) to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some rules that you can define.

<div class="flex-container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

.flex-container {
  display: flex;
}
.flex-container div {
  background: peachpuff;
  border: 4px solid brown;
  height: 100px;
  flex: 1;
}

• Flex Shorthand

    flex: <flex-grow> <flex-shrink> <flex-basis>
  

• Flex Types

  This scrim explains flex-grow, flex-shrink, flex-basis really well.

  flex: 1 –> flex: 1 1 0 sizes the item based on the width / height properties.

  flex: initial –> flex 0 1 auto sizes the item based on the width / height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.

  flex: auto –> flex: 1 1 auto sizes the item based on the width / height properties, but makes them fully flexible, so that they absorb any free space by growing along the main axis (flex-direction), and shrinks to its minimum size to fit the container.

  flex: none –> flex: 0 0 auto sized according to its width / height properties. Makes it fully inflexible. Neither shrinks nor grows.

  flex: <positive-number> –> flex: <positive-number> 1 0 receives the specified proportion

  For more details, refer this.

• Flex Grow

  flex-grow expects a single number as its value, and that number is used as the flex-item’s “growth factor”. When we applied flex: 1 to every div inside our container, we were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If we instead add flex: 2 to just one of the divs, then that div would grow to 2x the size of the others.

• Flex Shrink

  flex-shrink is similar to flex-grow, but sets the “shrink factor” of a flex item. flex-shrink only ends up being applied if the size of all flex items is larger than their parent container.

  For example, if our 3 divs from above had a width declaration like: width: 100px, and .flex-container was smaller than 300px, our divs would have to shrink to fit.

  The default shrink factor is flex-shrink: 1, which means all items will shrink evenly. If you do not want an item to shrink then you can specify flex-shrink: 0;.

  While using flex-shrink make sure to set flex-basis: auto and give a width to the element.

• Flex Basis

  Chatgpt conversation for reference.

  Specifies the initial main size of a flex item before any space distribution takes place. It overrides the width or height properties of a flex item.

    .item {
      flex-basis: <length> | auto | initial | inherit; }
  

  • <length>: A specific size (e.g., 10px, 50%, etc.). This sets the initial size of the flex item to the given length.
  • auto: The default value. The size is determined by the item’s content and any width or height properties.
  • initial: Sets the property to its default value (which is auto).
  • inherit: The value is inherited from the parent element.

    Default flex-basis: auto , but while using flex: 1, it sets flex-basis: 0

• Axes

  There are two axes or flex-direction,

  • row or horizontal (default)
  • column or vertical

    While using row, flex-basis refers to width, but in case of colum it refers to height.

    So using flex: 1 causes problem in column, setting flex-basis: 0.

• Alignment

  All about align-items (cross axis) and justify-content (primary axis). Additionaly align-items, align-content, align-self.

  Refer this for a quick recap. The images and examples are super helpful.

  Refer this for a comprehensive guide. GOATed resourse. covers everything one needs to know about flexbox.

• Order

  By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

    .item{
      order: 69;	/* can be -ve also */
    }
  

  the itmes are arranged in ascending order. Items with the same order revert to source order.

  Refer this codepen for example.

• Wrapping

  flex-wrap: wrap divides the flex into multiple main axes based on flex-basis

    .container{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
  

  For details, refer this.

• Gap

  The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.

    .container{
      gap: 10px;
      gap: 10px 20px; /* row-gap column gap */
      row-gap: 10px;
      column-gap: 20px;
    }
  

• When to use flexbox?

  For a detailed guide, refer this.

  • When we want to lay a collection of items out in one direction or another.

    For working with multiple rows and columns and larger layouts grid may be a better option.

  • Navbars (The ideal flexbox usecase)
  • Centering a single item
  • Card layouts pushing footer down
  • Media objects (an image or other element to one side and text to the right)
  • Responsive forms without using media queries

Normalize css

Normalize vs Reset vs Hybrid

• Normalize generally makes the style uniform throughout the browsers
• Reset makes the webpage a blank slate to style it with css, removing defualt browser styling entirely
• Somewhere between reset and normalize

Good resources

• normalize.css - most popular one
• modern-normalize - highly recommended
• Tailwind uses preflight
• Eric Meyer’s CSS reset - but it’s OLD
• Josh Comeau’s CSS reset
• Browser default styles

Undo a reset

use revert keyword

.article :where(h1, h2, h3, h4, h5) {
  all: revert;
}

Within an .article, headings are displayed using the original browser default styles, with appropriate font sizes and weights, thanks to revert

CSS Units

List of all the units

• 1px is 1/96th of an inch. Not the length of a physical pixel
• 1rem is the font-size of the root element (either :root or html). (preferred unit) (Most of the time 16px)
• 1em is the font-size of an element (or the element’s parent if you’re using it to set font-size)
• 1ch is width of 0
• 1vmin/1vmax is 1% of the viewport width or height, whichever is smaller/larger

  Use Cases

• vh,vw for hero elements
• rem for font size
• % for width generally, with max-width
• ch for <p> width (don’t go over 75, 45-55 is a good number)
• Generally do not specify height, if absolutely needed use min-height
• may use em for button padding
• may use px for other margin padding, but its highly subjective, check here

Fonts

Fallback font

• CSS trick’s system font stack

    body {
      font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
  

Self-hosted fonts

• Using google fonts violates European GDPR
• All major browsers support woff
• Find fonts here, font squirrel, dafont ```css @font-face { font-family: “Open Sans”; src: url(“/fonts/OpenSans-Regular-webfont.woff2”) format(“woff2”); unicode-range: U+0025-00FF; }

h1 { font-family: my-cool-font, sans-serif; } ```

Style norms

• Use line-height: 1.5 for better readability and accesibility
• Dn’t have more than 75 characters per line

text styles

• text-transform: capitalize/uppercase/lowercase/none/full-width/etc
• ellipsis ( … at overflow )

    .overflowing {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  

  Best practices

• Use preconnect while using external source, using <link> is more preferred than @import

    <head>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    </head>
  

• Dynamic font size

    article {
      font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
      max-inline-size:  66ch;
      line-height: 1.65;
    }
  

Pseudo classes and pseudo elements

For details, refer this.

• Dynamic/User Action:

  • :focus: Element selected by user (e.g., cursor or keyboard).
  • :hover: Element under mouse pointer.
  • :active: Element being clicked.
  • :link & :visited: Style links based on their state (e.g., blue for unvisited, purple for visited).

• Structural:

  • :root: Top-level document element, often used for global styles.
  • :first-child, :last-child, :only-child, :empty: Select elements based on their position or content.
  • :nth-child(n): Flexible selection based on patterns (e.g., every 3rd, even/odd). reference.

Pseudo-elements:
Allow styling of parts of elements not directly present in HTML, with specificity (0,0,0,1).

• Examples:
  • ::marker: Style bullets or numbers in lists.
  • ::first-letter, ::first-line: Style the first letter or line of text.
  • ::selection: Customize text highlight styling. Only works with -
    • color
    • background (specifically the background-color, background-image longhand properties)
    • text-shadow
  • ::before, ::after: Add extra content via CSS. Some use cases.

Attribute Selectors:
Target elements based on attributes, with specificity (0,0,1,0).

• Syntax Examples:
  • [attribute]: Selects elements with the specified attribute.
  • [attribute="value"]: Matches exact values.
  • [attribute^="value"], [attribute$=".jpg"], [attribute*="value"]: Match strings starting with, ending with, or containing the value.